    <style include="cr-shared-style settings-shared md-select iron-flex">
      /* Lines up with cr-input. */
      #custom-input {
        /* (cr-input line-height + cr-input top/bottom padding) / 2 -
           cr-radio disc-wrapper height / 2 */
        --cr-radio-button-disc-margin-block-start: calc(
            (1.54em + 12px) / 2 - 8px);
        align-items: start;
      }

      /* The theme mixes a link and a cr-button divided by a separator with
       * grit expressions and dom-if templates. That leads to a tricky thing
       * to style correctly, these are a workaround. */
      #themeRow cr-button {
        margin-inline-end: 20px;
      }

      #themeRow .separator {
         margin-inline-start: 0;
      }
    </style>
    <settings-animated-pages id="pages" section="appearance"
        focus-config="[[focusConfig_]]">
      <div route-path="default">
        <div class="settings-row first" id="themeRow"
            hidden="[[!pageVisibility.setTheme]]">
          <cr-link-row class="first" hidden="[[!pageVisibility.setTheme]]"
              label="$i18n{themes}" sub-label="[[themeSublabel_]]"
              on-click="openThemeUrl_" external></cr-link-row>
<if expr="not is_linux or chromeos_ash or chromeos_lacros">
          <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
            <div class="separator"></div>
            <cr-button id="useDefault" on-click="onUseDefaultTap_">
              $i18n{resetToDefaultTheme}
            </cr-button>
          </template>
</if>
<if expr="is_linux and not chromeos and not lacros">
          <div class="settings-row continuation"
              hidden="[[!showThemesSecondary_(
                  prefs.extensions.theme.id.value, useSystemTheme_)]]"
              id="themesSecondaryActions">
            <div class="separator"></div>
            <template is="dom-if" if="[[showUseClassic_(
                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
              <cr-button id="useDefault" on-click="onUseDefaultTap_">
                $i18n{useClassicTheme}
              </cr-button>
            </template>
            <template is="dom-if" if="[[showUseSystem_(
                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
              <cr-button id="useSystem" on-click="onUseSystemTap_">
                $i18n{useSystemTheme}
              </cr-button>
            </template>
          </div>
</if>
        </div>
        <div
            class="hr"
            hidden="[[!showHr_(
                pageVisibility.setTheme, pageVisibility.homeButton)]]">
        </div>
        <settings-toggle-button elide-label
            hidden="[[!pageVisibility.homeButton]]"
            pref="{{prefs.browser.show_home_button}}"
            label="$i18n{showHomeButton}"
            sub-label="[[getShowHomeSubLabel_(
                prefs.browser.show_home_button.value,
                prefs.homepage_is_newtabpage.value,
                prefs.homepage.value)]]">
        </settings-toggle-button>
        <template is="dom-if" if="[[prefs.browser.show_home_button.value]]">
          <div class="list-frame" hidden="[[!pageVisibility.homeButton]]">
            <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}">
              <controlled-radio-button class="list-item" name="true"
                  pref="[[prefs.homepage_is_newtabpage]]"
                  label="$i18n{homePageNtp}" no-extension-indicator>
              </controlled-radio-button>
              <controlled-radio-button id="custom-input" class="list-item"
                  name="false" pref="[[prefs.homepage_is_newtabpage]]"
                  no-extension-indicator>
                <!-- TODO(dbeam): this can show double indicators when both
                     homepage and whether to use the NTP as the homepage are
                     managed. -->
                <home-url-input id="customHomePage" pref="{{prefs.homepage}}"
                    can-tab="[[!prefs.homepage_is_newtabpage.value]]">
                </home-url-input>
              </controlled-radio-button>
              <template is="dom-if" if="[[prefs.homepage.extensionId]]">
                <extension-controlled-indicator
                    extension-id="[[prefs.homepage.extensionId]]"
                    extension-can-be-disabled="[[
                        prefs.homepage.extensionCanBeDisabled]]"
                    extension-name="[[prefs.homepage.controlledByName]]"
                    on-disable-extension="onDisableExtension_">
                </extension-controlled-indicator>
              </template>
            </settings-radio-group>
          </div>
        </template>
        <div
            class="hr"
            hidden="[[!showHr_(
                pageVisibility.homeButton, pageVisibility.bookmarksBar)]]">
        </div>
        <settings-toggle-button
            hidden="[[!pageVisibility.bookmarksBar]]"
            pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
            label="$i18n{showBookmarksBar}">
        </settings-toggle-button>
<if expr="is_linux and not chromeos and not lacros">
        <div class="hr" hidden="[[!pageVisibility.bookmarksBar]]"></div>
        <settings-toggle-button
            hidden="[[!showCustomChromeFrame_]]"
            pref="{{prefs.browser.custom_chrome_frame}}"
            label="$i18n{showWindowDecorations}"
            inverted>
        </settings-toggle-button>
</if>
        <div class="cr-row">
          <div class="flex cr-padded-text" aria-hidden="true">
            $i18n{fontSize}
          </div>
          <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
              pref="{{prefs.webkit.webprefs.default_font_size}}"
              menu-options="[[fontSizeOptions_]]">
          </settings-dropdown-menu>
        </div>
        <cr-link-row class="hr" id="customize-fonts-subpage-trigger"
            label="$i18n{customizeFonts}" on-click="onCustomizeFontsTap_"
            role-description="$i18n{subpageArrowRoleDescription}">
        </cr-link-row>
        <div class="cr-row" hidden="[[!pageVisibility.pageZoom]]">
          <div id="pageZoom" class="flex cr-padded-text" aria-hidden="true">
            $i18n{pageZoom}
          </div>
          <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"
              on-change="onZoomLevelChange_">
            <template is="dom-repeat" items="[[pageZoomLevels_]]">
              <option value="[[item]]"
                  selected="[[zoomValuesEqual_(item, defaultZoom_)]]">
                [[formatZoom_(item)]]%
              </option>
            </template>
          </select>
        </div>
        <template is="dom-if" if="[[showReaderModeOption_]]">
          <settings-toggle-button
              class="hr"
              pref="{{prefs.dom_distiller.offer_reader_mode}}"
              label="$i18n{readerMode}"
              sub-label="$i18n{readerModeDescription}">
          </settings-toggle-button>
        </template>
<if expr="is_macosx">
        <settings-toggle-button class="hr"
            pref="{{prefs.webkit.webprefs.tabs_to_links}}"
            label="$i18n{tabsToLinks}">
        </settings-toggle-button>
        <settings-toggle-button class="hr"
            pref="{{prefs.browser.confirm_to_quit}}"
            label="$i18n{warnBeforeQuitting}">
        </settings-toggle-button>
</if>
      </div>
      <template is="dom-if" route-path="/fonts">
        <settings-subpage
            associated-control="[[$$('#customize-fonts-subpage-trigger')]]"
            page-title="$i18n{customizeFonts}">
          <settings-appearance-fonts-page prefs="{{prefs}}">
          </settings-appearance-fonts-page>
        </settings-subpage>
      </template>
    </settings-animated-pages>
    <template is="dom-if" if="[[showManagedThemeDialog_]]" restamp>
      <managed-dialog on-close="onManagedDialogClosed_"
          title="$i18n{themeManagedDialogTitle}"
          body="$i18n{themeManagedDialogBody}">
      </managed-dialog>
    </template>
